{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设计系统展示 - 本地有约</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <style>
        .showcase-section {
            margin-bottom: 4rem;
            padding: 2rem;
            background: white;
            border-radius: 1.25rem;
            box-shadow: var(--shadow-md);
        }
        .showcase-section h2 {
            background: var(--gradient-cosmic);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 2rem;
            font-weight: 700;
        }
        .color-box {
            width: 150px;
            height: 100px;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            box-shadow: var(--shadow-md);
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-custom">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-heart"></i>
                本地有约
            </a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">活动</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">地图</a>
                    </li>
                    <li class="nav-item notification-badge">
                        <a class="nav-link" href="#">
                            <i class="fas fa-bell"></i>
                            <span class="badge">5</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 页面头部 -->
    <div class="page-header">
        <div class="container">
            <h1><i class="fas fa-palette"></i> 设计系统展示</h1>
            <p>全新的高级现代化设计 - 玻璃态 + 多彩渐变 + 流畅动画</p>
        </div>
    </div>

    <div class="container py-5">
        <!-- 配色方案 -->
        <div class="showcase-section fade-in">
            <h2><i class="fas fa-swatchbook"></i> 渐变配色系统</h2>
            <div class="row g-3">
                <div class="col-md-3">
                    <div class="color-box" style="background: var(--gradient-cosmic);">
                        Cosmic<br>宇宙渐变
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="color-box" style="background: var(--gradient-ocean);">
                        Ocean<br>海洋渐变
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="color-box" style="background: var(--gradient-sunset);">
                        Sunset<br>日落渐变
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="color-box" style="background: var(--gradient-forest);">
                        Forest<br>森林渐变
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="color-box" style="background: var(--gradient-purple);">
                        Purple<br>紫粉渐变
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="color-box" style="background: var(--gradient-aurora);">
                        Aurora<br>极光渐变
                    </div>
                </div>
            </div>
        </div>

        <!-- 按钮组件 -->
        <div class="showcase-section fade-in-right">
            <h2><i class="fas fa-hand-pointer"></i> 按钮组件</h2>
            <div class="d-flex flex-wrap gap-3">
                <button class="btn btn-gradient-primary">
                    <i class="fas fa-plus"></i> 主按钮
                </button>
                <button class="btn btn-gradient-success">
                    <i class="fas fa-check"></i> 成功按钮
                </button>
                <button class="btn btn-gradient-primary">
                    <i class="fas fa-heart"></i> 带图标
                </button>
                <button class="btn btn-gradient-success">
                    <i class="fas fa-download"></i> 下载
                </button>
            </div>
        </div>

        <!-- 活动卡片 -->
        <div class="showcase-section fade-in-left">
            <h2><i class="fas fa-th-large"></i> 活动卡片</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="activity-card">
                        <div class="activity-image">
                            <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=220&fit=crop" alt="活动">
                            <span class="activity-badge">热门</span>
                        </div>
                        <div class="activity-body">
                            <h5 class="activity-title">周末户外徒步活动</h5>
                            <div class="activity-info">
                                <div class="activity-info-item">
                                    <i class="fas fa-calendar"></i>
                                    <span>2024-10-28</span>
                                </div>
                                <div class="activity-info-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>香山公园</span>
                                </div>
                                <div class="activity-info-item">
                                    <i class="fas fa-users"></i>
                                    <span>12/20 人</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="activity-card">
                        <div class="activity-image">
                            <img src="https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=400&h=220&fit=crop" alt="活动">
                            <span class="activity-badge">新活动</span>
                        </div>
                        <div class="activity-body">
                            <h5 class="activity-title">摄影交流分享会</h5>
                            <div class="activity-info">
                                <div class="activity-info-item">
                                    <i class="fas fa-calendar"></i>
                                    <span>2024-10-29</span>
                                </div>
                                <div class="activity-info-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>咖啡厅</span>
                                </div>
                                <div class="activity-info-item">
                                    <i class="fas fa-users"></i>
                                    <span>8/15 人</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="activity-card">
                        <div class="activity-image">
                            <img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=400&h=220&fit=crop" alt="活动">
                            <span class="activity-badge">报名中</span>
                        </div>
                        <div class="activity-body">
                            <h5 class="activity-title">瑜伽体验课程</h5>
                            <div class="activity-info">
                                <div class="activity-info-item">
                                    <i class="fas fa-calendar"></i>
                                    <span>2024-10-30</span>
                                </div>
                                <div class="activity-info-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>健身房</span>
                                </div>
                                <div class="activity-info-item">
                                    <i class="fas fa-users"></i>
                                    <span>15/20 人</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="showcase-section scale-in">
            <h2><i class="fas fa-chart-bar"></i> 统计卡片</h2>
            <div class="row g-4">
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-content">
                            <h3>1,234</h3>
                            <p>活跃用户</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="stat-content">
                            <h3>567</h3>
                            <p>进行中活动</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div class="stat-content">
                            <h3>8,901</h3>
                            <p>累计报名</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="stat-content">
                            <h3>4.8</h3>
                            <p>平均评分</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 表单组件 -->
        <div class="showcase-section fade-in">
            <h2><i class="fas fa-edit"></i> 表单组件</h2>
            <div class="row">
                <div class="col-md-6">
                    <label class="form-label-custom">活动名称</label>
                    <input type="text" class="form-control form-control-custom" placeholder="请输入活动名称">
                </div>
                <div class="col-md-6">
                    <label class="form-label-custom">活动类型</label>
                    <select class="form-control form-control-custom">
                        <option>户外运动</option>
                        <option>文化艺术</option>
                        <option>美食品鉴</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 标签组件 -->
        <div class="showcase-section fade-in-right">
            <h2><i class="fas fa-tags"></i> 标签组件</h2>
            <div class="d-flex flex-wrap">
                <span class="tag-custom"><span>户外运动</span></span>
                <span class="tag-custom"><span>文化艺术</span></span>
                <span class="tag-custom"><span>美食品鉴</span></span>
                <span class="tag-custom"><span>社交聚会</span></span>
                <span class="tag-custom"><span>学习交流</span></span>
            </div>
        </div>

        <!-- 加载动画 -->
        <div class="showcase-section scale-in">
            <h2><i class="fas fa-spinner"></i> 加载动画</h2>
            <div class="text-center">
                <div class="loader"></div>
                <p class="text-muted mt-3">多彩渐变旋转加载器</p>
            </div>
        </div>

        <!-- 空状态 -->
        <div class="showcase-section fade-in-left">
            <h2><i class="fas fa-inbox"></i> 空状态</h2>
            <div class="empty-state">
                <i class="fas fa-calendar-times"></i>
                <h3>暂无活动</h3>
                <p>目前还没有任何活动，快去创建第一个活动吧！</p>
                <button class="btn btn-gradient-primary mt-3">
                    <i class="fas fa-plus"></i> 创建活动
                </button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
